<template>
  <div class="leftchild14">
    <header>
      <li>
        <router-link to="/"><span>工作台</span></router-link>
      </li>
      &nbsp;
      <li>/</li>
      &nbsp;
      <li>系统设置</li>
    </header>
    <main>
      <div class="box">
        <div class="left">
          <div v-for="(item, index) in state.list" :key="index">
            <router-link :to="item.url"
              ><li>{{ item.name }}</li></router-link
            >
          </div>
        </div>
        <div class="right"><router-view /></div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    let state: any = reactive({
      list: [
        {
          url: '/system/systems',
          name: '系统设置'
        },
        {
          url: '/system/word',
          name: '国际化设置'
        },
        {
          url: '/system/seo',
          name: 'SEO设置'
        },
        {
          url: '/system/datastatistics',
          name: '数据统计'
        },
        {
          url: '/system/oss',
          name: 'OSS设置'
        },
        {
          url: '/system/smtp',
          name: 'SMTP设置'
        }
      ]
    })

    return { state }
  }
})
</script>

<style lang="scss">
.leftchild14 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  header {
    height: 10%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eae2e2;
    li {
      cursor: pointer;
      color: #999;

      span {
        color: #999;
      }
    }
  }

  main {
    flex-grow: 1;
    overflow-y: scroll;
    .box {
      width: 97%;
      background-color: #fff;
      margin: 2% auto;
      display: flex;
      .left {
        width: 12%;
        height: 100%;
        background: antiquewhite;
        display: flex;
        flex-direction: column;
        align-items: center;
        li {
          height: 60px;
          line-height: 60px;
        }
      }
      .right {
        width: 88%;
        height: 100%;
        background-color: aqua;
      }
    }
  }
}
</style>
